<template>
  <div class="home">
    <van-nav-bar class="nav-bar" title="讲课APP" fixed />
    
    <div class="content">
      <!-- 轮播图 -->
      <van-swipe class="banner" :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <div class="banner-item" :style="{ backgroundImage: `url(${banner.image})` }">
            <div class="banner-text">
              <h3>{{ banner.title }}</h3>
              <p>{{ banner.description }}</p>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>

      <!-- 课程分类 -->
      <div class="category-section card">
        <h2 class="section-title">课程分类</h2>
        <van-grid :column-num="4" :border="false" square>
          <van-grid-item v-for="item in categories" :key="item.id">
            <div class="category-item">
              <van-icon :name="item.icon" :color="item.color" size="24" />
              <span>{{ item.name }}</span>
            </div>
          </van-grid-item>
        </van-grid>
      </div>

      <!-- 热门课程 -->
      <div class="course-section">
        <h2 class="section-title">热门课程</h2>
        <div class="course-list">
          <div v-for="course in courses" :key="course.id" class="course-card card" @click="goToCourseDetail(course.id)">
            <div class="course-cover" :style="{ backgroundImage: `url(https://picsum.photos/300/200)` }">
              <span class="course-tag">{{ course.category }}</span>
            </div>
            <div class="course-info">
              <h3 class="course-title">{{ course.title }}</h3>
              <p class="course-desc">{{ course.description }}</p>
              <div class="course-meta">
                <span class="course-price">¥{{ course.price }}</span>
                <span class="course-duration">{{ course.duration }}分钟</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { courseApi } from '@/api';
import type { Course } from '@/api/types';

const router = useRouter();
const courses = ref<Course[]>([]);

const banners = ref([
  { id: 1, image: 'https://picsum.photos/800/400', title: '编程课程' },
  { id: 2, image: 'https://picsum.photos/800/400', title: '设计课程' }
]);

const categories = ref([
  { id: 1, name: '编程', icon: 'apps-o', color: '#1989fa' },
  { id: 2, name: '设计', icon: 'photo-o', color: '#ff976a' },
  { id: 3, name: '语言', icon: 'chat-o', color: '#07c160' },
  { id: 4, name: '音乐', icon: 'music-o', color: '#ee0a24' }
]);

const goToCourseDetail = (id: number) => {
  router.push(`/course/${id}`);
};

onMounted(async () => {
  try {
    const { data } = await courseApi.getCourses();
    courses.value = data.data;
  } catch (error) {
    console.error('获取课程列表失败:', error);
  }
});
</script>

<style scoped lang="scss">
@use '@/styles/_variables.scss' as vars;
@use '@/styles/_mixins.scss' as mix;

@use '@/styles/index' as *;

.home {
  padding-top: 46px;
  min-height: 100vh;
}

.content {
  padding: 16px;
}

.banner {
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  margin: -16px -16px 16px;
  
  .banner-item {
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 60%;
      background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    }
  }
  
  .banner-text {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    color: #fff;
    
    h3 {
      font-size: 20px;
      margin-bottom: 4px;
    }
    
    p {
      font-size: 14px;
      opacity: 0.8;
    }
  }
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  
  span {
    font-size: 12px;
    color: #666;
  }
}

.course-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 16px;
}

.course-card {
  border-radius: 8px;
  overflow: hidden;
  
  .course-cover {
    height: 120px;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  
  .course-tag {
    position: absolute;
    right: 8px;
    top: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
  }
  
  .course-info {
    padding: 12px;
  }
  
  .course-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
    @include text-ellipsis(1);
  }
  
  .course-desc {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    @include text-ellipsis(2);
  }
  
  .course-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .course-price {
      color: #ee0a24;
      font-weight: bold;
    }
    
    .course-duration {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>
